<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>物料信息</title>
    <th:block th:include="material/core/resources::headers"/>
</head>

<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>物料消费</cite></a>
          </span>

</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <!-- 基础功能 -->
                <div class="layui-card-header ">
                    <button class="layui-btn" th:onclick="|xadmin.open('新增物料','@{/mc/insert}',600,400)|">新增
                    </button>
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>删除</button>
                    <button class="layui-btn " onclick="location.reload()">刷新</button>
                    <!-- 查询模块 -->
                    <form class="layui-form layui-col-space5" style="float: right">
                        <div class="layui-inline layui-show-xs-block">
                            <select name="modules" lay-verify="required" lay-search="">
                                <option value="">直接选择或搜索选择</option>
                                <option value="1">物料编号</option>
                                <option value="2">物料类型</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="info" id="info" placeholder="请输入信息" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="search" lay-filter="search" onclick="searchInfo();return false;"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>

                <!-- 动态渲染 -->
                <div class="layui-card-body ">
                    <table class="layui-hide" id="mcList"></table>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<!-- 动态渲染列表数据 -->
<script>
    let tableIns;
    layui.use(['table', 'form'], function () {
        const table = layui.table;
        const form = layui.form;
        tableIns = table.render({
            height: 512,
            elem: '#mcList',
            url: '/mc/list',
            method: "post",
            page: true,
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '物料消耗编号', width: 110, sort: true, align: 'center'},
                    {field: 'task', title: '作业编号', align: 'center'},
                    {field: 'materialInfo', title: '物料', align: 'center', templet(q){
                            const updateUrl = `${pathPrefix}/materInfo/update?id=${q.id}`;
                            return `
                                <a style="color: blue" title="编辑" onClick="xadmin.open('编辑物料信息','${updateUrl}',800,600)"
                                   href="javascript:;">${q.id}</a>
                                 `
                        }
                    },
                    {field: 'consumeQuantity', title: '消耗数量', align: 'center'},
                    {field: 'date', title: '消耗日期', align: 'center'},
                    {field: 'sender', title: '发送人', align: 'center'},
                    {field: 'receiver', title: '收件人', sort: true, align: 'center'},
                    {field: 'remark', title: '备注', sort: true, align: 'center'},
                    {
                        field: 'action', title: '操作', templet(d) {
                            // 反引号 ，在里面写字符串可以换行
                            //          取变量， ${}
                            const updateUrl = `${pathPrefix}/mc/update?id=${d.id}`;
                            return `
                                <div class="td-manage">
                                      <a title="编辑" onclick="xadmin.open('编辑物料信息','${updateUrl}',800,600)" href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                      </a>
                                      <a title="删除" onclick="mcDelete(${d.id})" href="javascript:;">
                                        <i class="layui-icon">&#xe640;</i>
                                      </a>
                                </div>
                            `
                        }
                    },
                ]
            ],
            parseData(res) {
                return {
                    "code": res.success ? 0 : 300,
                    "count": res.data.total,
                    "data": res.data.list
                }
            }
        });
    });

    function mcDelete(id) {

        layer.confirm('确认要删除吗？', function () {
            $.ajax({
                url: pathPrefix + '/mc/delete/' + id,
                type: 'delete',
                success(res) {
                    if (res.success) {
                        layer.msg("删除成功");
                        setTimeout(function () {
                            tableIns.reload();
                        }, 500);
                    }
                }
            })
        });
    }
</script>

<!--查询-->
<script>
    function searchInfo() {
        const id = $("#info").val();
        layui.use('table', function () {
            const table = layui.table;
            alert(id)
            table.render({
                height: 512,
                elem: '#mcList',
                url: pathPrefix +'/mc/query/'+ id,
                method: "post",
                page: true,
                cols: [
                    [
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'id', title: '物料消耗编号', width: 110, sort: true, align: 'center'},
                        {field: 'task', title: '作业编号', align: 'center'},
                        {field: 'materialInfo', title: '物料', align: 'center', templet(q){
                                const updateUrl = `${pathPrefix}/materInfo/update?id=${q.id}`;
                                return `
                                <a title="编辑" onClick="xadmin.open('编辑物料信息','${updateUrl}',800,600)"
                                   href="javascript:;">
                                    <i className="layui-icon">&#xe642;</i>
                                </a>
                                 `
                            }
                        },
                        {field: 'consumeQuantity', title: '消耗数量', align: 'center'},
                        {field: 'date', title: '消耗日期', align: 'center'},
                        {field: 'sender', title: '发送人', align: 'center'},
                        {field: 'receiver', title: '收件人', sort: true, align: 'center'},
                        {field: 'remark', title: '备注', sort: true, align: 'center'},
                        {
                            field: 'action', title: '操作', templet(d) {
                                // 反引号 ，在里面写字符串可以换行
                                //          取变量， ${}
                                const updateUrl = `${pathPrefix}/mc/update?id=${d.id}`;
                                return `
                                <div class="td-manage">
                                      <a title="编辑" onclick="xadmin.open('编辑物料信息','${updateUrl}',800,600)" href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                      </a>
                                      <a title="删除" onclick="mcDelete(${d.id})" href="javascript:;">
                                        <i class="layui-icon">&#xe640;</i>
                                      </a>
                                </div>
                            `
                            }
                        },
                    ]
                ],
                parseData(res) {
                    return {
                        "code": res.success ? 0 : 300,
                        "count": res.data.total,
                        "data": res.data.list
                    }
                }
            })
        });
    }

</script>

</html>